import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  //采用history路由
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      name: "layout",
      meta: {title: "布局"},
      component: () => import('@/layout/layout'),
      redirect: "/index",
      //这里只是重定向浏览器地址，但是渲染还是在父级，
      // 好处：就是可以打破不用和父同名默认是首页的规则
      children:[
        {
          path: "/index",
          name: "index",
          meta: {title: "首页"},
          component: () => import('@/views/index'),
          // 针对性的处理
          beforeEnter:function(){
            console.log(2)
           }
        },
        {
          path: "/user",
          name: "user",
          meta: {title: "用户管理",isAuth: true},
          component: () => import('@/views/user/index')
        },
        {
          path: "/course",
          name: "course",
          meta: {title: "课程管理"},
          component: () => import('@/views/course/index')
        },
        {
          path: "/order",
          name: "order",
          meta: {title: "订单管理"},
          component: () => import('@/views/order')
        },
        {
          path: "/product",
          name: "product",
          meta: {title: "产品管理"},
          component: () => import('@/views/product')
        },
        {
          path: "/book",
          name: "book",
          meta: {title: "图书管理"},
          component: () => import('@/views/book')
        },
      ]
    },

    {
      path: "/login",
      name: "login",
      meta: {title: "登录"},
      component: () => import('@/views/login')
    },
    {
      path: "/error",
      name: "error",
      meta: {title: "登录"},
      component: () => import('@/views/error')
    },
  ]
});
// 1：路由请求进入前置守卫
// 参数：
// 参数1：to : 当前你访问路由
// 参数2: from：上次访问的路由
// 参数3: next: 进入下一个守卫 ,执行的时候必须是next()
// 返回值：
// 返回值1: return true 相当于 next() 继续执行请求
// 返回值2: return false ： 终止请求
// 返回值3: return {path:""} ，如果你指定path，就直接转发到你指定的地址，相当于$router.push({path:"/xxx"});
// 返回值4: next()// 继续请求
router.beforeEach((to) => {
  console.log("1")
  if (to.matched.length == 0) {
    return {path: "/error"}
  }
})


router.beforeEach((to) => {
  // 1: 排除不需要拦截的授权的页面
  if (to.path == "/login") {
    return true;
  }
  //只拦截meta中isAuth=true的
  if (to.meta.isAuth){
    //2: 如果登录成功，直接访问成功
    if(sessionStorage.getItem("isAuth")){
      return true
    }else {
      // 3: 如果用户访问的受保护的资源，且没有登录，则跳转到登录页面
      // 举个场景：在操作系统，但是突然要吃饭了，过了30分钟以后继续来访问系统。因为token有时间限制。这个肯定会转发登录去、
      // 为了良好的体验
      // 将当前路由的完整的地址做为参数传递给Login.vue的组件，以便登录成功以后继续回到该位置
      return {path: "/login", query: {back: to.fullPath}}
    }
  }
})

// 后置防卫
router.afterEach(to => {
  console.log(3)
  document.title = to.meta.title;
})
export default router
